<template>
  <view class="cforder">
    <view class="cforder-top">
      <order
        :img="list1.img"
        :title="list1.title"
        :title1="list1.title1"
        :price="list1.price"
        :num="list1.num"
      >
      </order>
      <order
        :img="list2.img"
        :title="list2.title"
        :title1="list2.title1"
        :price="list2.price"
        :num="list2.num"
      >
      </order>
      <view class="payprice">
        <view class="payprice-left"> 实付金额 </view>
        <view class="payprice-right">
          ￥{{ list1.price * list1.num + list2.price * list2.num }}
        </view>
      </view>
      <view class="notes">
        <view class="notes-left"> 备注 </view>
        <view class="notes-right">
          <uv-input
            placeholder="请填写备注"
            border="none"
            customStyle="width:200rpx;"
          ></uv-input>
        </view>
      </view>
    </view>
    <view class="cforder-center">
      <uv-radio-group
        v-model="radiovalue"
        placement="column"
        iconPlacement="right"
        iconColor="#fff"
        activeColor="#fc4626"
      >
        <view class="flex">
          <image src="/static/微信.png"></image
          ><uv-radio name="微信支付" label="微信支付"></uv-radio>
        </view>
        <view class="flex"
          ><image src="/static/支付宝.png"></image
          ><uv-radio name="支付宝" label="支付宝"></uv-radio>
        </view>
        <view class="flex">
          <image src="/static/余额.png"></image>
          <uv-radio name="余额" label="余额"></uv-radio>
        </view>
      </uv-radio-group>
    </view>
    <view class="cforder-bottom">
      <view class="bottom-left">
        <span class="fontcolor">合计：</span>￥<span class="price">898</span>.00
      </view>
      <view class="bottom-right">
        <button class="btn">立即支付</button>
      </view>
    </view>
  </view>
</template>

<script>
import order from "../../components/order.vue";
export default {
  components: {
    order,
  },
  data() {
    return {
      radiovalue: "微信支付",
      list1: {
        img: "/static/机油.jpg",
        title: "美孚（Mobil）金装美孚1号 全合成机油",
        title1: "全合成; 4L",
        price: 439.0,
        num: 1,
      },
      list2: {
        img: "/static/机油.jpg",
        title: "驾驰/THINKAUTO 放油螺栓...",
        title1: "全合成; 4L",
        price: 11.5,
        num: 1,
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss">
page{
  background-color: #f5f5f5;
}
.cforder {
  background-color: #f5f5f5;
  // margin-top: 20rpx;
  border: 1px solid #f5f5f5;
  // border: 1px solid red;

  .cforder-top {
    // padding-top: 20rpx;
    width: 92%;
    margin: auto;
    // border: 1px solid red;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 20rpx;
    background-color: #fff;
    .payprice {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      color: #666666;
      .payprice-right {
        color: #333333;
      }
    }
    .notes {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      color: #666666;
    }
  }
  .cforder-center {
    // display: flex;
    width: 92%;
    margin: auto;
    margin-top: 20rpx;
    // margin-bottom: 200rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .flex {
      display: flex;
      // justify-content: space-between;
      background-color: #fff;
      padding: 20rpx;
      // border: 1px solid red;
      .uv-radio {
        width: 90%;
        margin: auto;
      }
    }
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .cforder-bottom {
    position: absolute;
    width: 100%;
    // padding: 10rpx;
    background-color: #fff;
    // margin-top: 140rpx;
    // height: 100rpx;
    padding: 20rpx;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-left {
      color: #fc3d1b;
      .fontcolor {
        color: #3a3a3a;
      }
      .price {
        font-size: 40rpx;
      }
    }
    .bottom-right {
      .btn {
        background-color: #fc4424;
        color: #fff;
        width: 250rpx;
        margin-right: 40rpx;
        border-radius: 50px;
      }
    }
  }
}
</style>
